<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from 'element-plus'
const route=useRoute()
const err=computed(()=>{
  return route.params.err
})
ElMessage.error('错误页面')
</script>
<template>
  <el-container class="main">
    <el-header height="64px">
      <TopBar></TopBar>
    </el-header>
    <el-container class="container">
      <h1 class="big-title">{{ err }}</h1>
      <h2 v-if="err==='403'">抱歉，你无权访问该页面</h2>
      <h2 v-else-if="err==='404'">抱歉，你访问的页面不存在</h2>
      <h2 v-else> 抱歉，服务器出错了 </h2>
      <h3 v-if="err==='403'">请与所属部门联系取得接入许可</h3>
      <el-icon class="logo">
        <BaseIcons name="errorLogo"></BaseIcons>
      </el-icon>
    </el-container>
  </el-container>
</template>


<style scoped>
.container{
  color: #3D3D3D;
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.big-title{
  font-size: 144px;
  font-weight: 700;
}
.logo{
  font-size: 330px;
}
h2{
  font-size: 36px;
}
h3{
  font-size: 18px;
}
:deep(.el-header){
  padding: 0;
}
</style>